﻿@using nanoCMS.Core
@using nanoCMS.Core.Resources
@using nanoCMS.Core.WebProviders.HtmlHelpers
@using nanoCMS.Core.WebUI.Models.ViewModels
@model UserEditVM
@using (Ajax.BeginForm("Edit", "User", new { }, new AjaxOptions { UpdateTargetId = "validationSummary" }, new { }))
{
    <div id="validationSummary">
    </div>
    <fieldset id="">
        <legend>Edit profile: @Model.User.DisplayName (@Model.User.Username)</legend>
        <div>
            <label>
                @Translation.DisplayName</label>
            <input type="text" name="DisplayName" value="@Model.User.DisplayName"/>
        </div>
        <div>
            @Translation.ChangePassword:</div>
        <div>
            <label>
                @Translation.NewPassword:</label>
            <input type="password" name="Password" value="" />
        </div>
        <div>
            <label>
                @Translation.NewPasswordAgain:</label>
            <input type="password" name="PasswordConfirm" value="" />
        </div>
        <div>
            <label>
                @Translation.OldPassword:</label>
            <input type="password" name="OldPassword" value="" />
        </div>
        <div>
            <input type="submit" value="@Translation.Save" />
        </div>
    </fieldset>
    
    <div id="avatar_display" style="display: none;">
        <img id="img_avatar" src="" alt="icon" />
        @Ajax.ActionLink("Remove Avatar", "DeleteAvatar", "User", new { }, new AjaxOptions() { HttpMethod = "post", OnSuccess = "AvatarDeleted" }, new object())
    </div>
    <div id="avatar_container">
        <div id="info">
            -- no runtime (html5, flash, silverlight) for image upload supported --
        </div>
        <br />
        <a id="avatar_browse" href="#">[Upload file]</a>
    </div>
}
<!-- Third party script for BrowserPlus runtime (Google Gears included in Gears runtime now) -->
<script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>
@*<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>*@
<script type="text/javascript">
    function createUploader(container, imageContainer, valueField, browseButton, imageType) {
        var uploader = new plupload.Uploader({
            runtimes: 'gears,html5,flash,silverlight,browserplus',
            browse_button: browseButton,
            container: container,
            max_file_size: '1mb',
            autostart: true,
            url: '@Url.Action("UploadAvatar", "User", new { area = "Core" })',
            flash_swf_url: '@Html.UrlInnerHome()' + 'Content/plupload/plupload.flash.swf',
            silverlight_xap_url: '@Html.UrlInnerHome()' + 'Content/plupload/plupload.flash.swf',
            filters: [
			    { title: "Image files", extensions: "jpg,gif,png" }
		    ],
            multiple_queues: false,
            multipart_params: { type: imageType }
            // chunk_size: '20kb' // no chunk_ing 
        });

        uploader.bind('Init', function (up, params) {
            jQuery('#' + container + ' > #info').html("");
        });

        uploader.init(); // start before the rest (plupload, otherwise doesn't work) 

        uploader.bind('FilesAdded', function (up, files) {
            jQuery.each(files, function (i, file) {
                jQuery().html('<div id="' + file.id + '">' +
                    file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
                    '</div>');
            });
            up.refresh(); // Reposition Flash/Silverlight
            up.start();
        });

        uploader.bind('UploadProgress', function (up, file) {
            jQuery('#' + container + ' > #' + file.id + " b").html(file.percent + "%");
        });

        uploader.bind('Error', function (up, err) {
            jQuery('#' + container + ' > #info').html("<div>Error: " + err.code +
			        ", Message: " + err.message + (err.file ? ", File: " + err.file.name : "") +
			"</div>");

            up.refresh(); // Reposition Flash/Silverlight
        });

        uploader.bind('FileUploaded', function (up, file, params) {
            jQuery('#' + container + ' > #' + file.id + " b").html("100%");
            //            alert(params.response);
            var response = jQuery.parseJSON(params.response);
            if (response.result == "ok") {
                // hide uploader
                jQuery('#' + container).hide();
                // fetch image
                jQuery('#' + imageContainer + ' > img').attr("src", '@Url.Content(Settings.AvatarUploadPath)' + response.fileName);
                jQuery('#' + imageContainer).show();
@*                // reload page*@
@*                document.location = '@(Html.Url("EditUser", new object()))'; // TODO *@
            } else {
                alert(response.message);
            }
        });
        
        return uploader;
    }

    jQuery(function () {
        // try setup initial avatar
        var avatarUrl = '@Url.Content(Settings.AvatarUploadPath)';
        var avatarName = '@(Model.AvatarName)';
        if(avatarName != '') {
            jQuery("#avatar_display").show();
            jQuery('#avatar_display > img').attr("src", avatarUrl + avatarName);
            jQuery("#avatar_container").hide();
        }
        // create uploader
        var avatar_uploader = createUploader("avatar_container", "avatar_display",
            "avatarFname", "avatar_browse", "avatar");
    });

    function AvatarDeleted(parameters) {
        jQuery("#avatar_display").hide();
        jQuery('#avatar_display > img').attr("src", "");
        jQuery("#avatar_container").show();
    }
</script>
